<template>
  <div class="layout-all">
    <div class="flex_start flex_row">
        <el-select v-model="searchWhere.status" placeholder="请选择" @change="statusOptChange">
          <el-option
            v-for="item in status_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
          </el-option>
        </el-select>
        <el-tag type="success">分佣余额:{{brokerage}}</el-tag>
        <el-tag type="primary" style="margin: 0 10px">总金额:{{below_brokerage}}</el-tag>
      </div>
      <el-table
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        style="width: 100%;margin-top:10px"
      >
        <el-table-column align="center" prop="id" label="序号" width="70" :fixed="isMobile()?'left':undefined"/>
        <el-table-column align="center" prop="order_sn" label="订单号"/>
        <el-table-column align="center" prop="level" label="分佣等级" />
        <el-table-column align="center" prop="money" label="分佣金额" />
        <el-table-column align="center" prop="remark" label="描述"  />
        <el-table-column align="center" prop="status_str" label="状态" />
        <el-table-column align="center" prop="trigger_user" label="分佣人" width="100">
          <template slot-scope="scope">
            {{scope.row.trigger_user && scope.row.trigger_user.nickname}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="update_time" label="修改时间" />
      </el-table>

    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import control from "../../components/control/control";
export default {
  props:['user_id'],
  name:'commissionLog',
  components: { control },
  data() {
    return {
      status_options: [
         { value: '', label: '全部分佣' },
        { value: 0, label: '预分佣' },
        { value: 1, label: '已分佣' },

      ],
      config: [
        {
          type: "text",
          placeholder: "请输入内容事项",
          field: "title",
          val: "",
        },
      ],
      value: "",
      brokerage: "",
      below_brokerage: "",
      searchWhere: {
        title: "",
        status:'',
      },
      tableData: [],
      total: 0,
      current_page: 1,
      per_page: 14,
    };
  },
  onShow(){

  },
  mounted() {
    this.onSearch();
  },
  methods: {
        //分佣查询
    statusOptChange (status) {
      this.searchWhere.status = status
      this.onSearch()
    },
    // 查询
    handleSizeChange(val) {
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.current_page = val;
      this.onSearch();
    },
    onSearch() {
      const form = {};
      form.page = this.current_page;
      form.map = this.searchWhere;
      form.map.user_id = this.user_id
      this.get("/shop/Order/commissionLog", form, "POST").then((e) => {
        this.tableData = e.list.data;
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.current_page = e.list.current_page;
        this.brokerage = e.brokerage
        this.below_brokerage = e.below_brokerage
      });
    },
  },
};
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
</style>>
